    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>添加数据</title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            margin: 100px auto;
            border: 1px solid #6f6369;
            border-collapse: collapse;
        }
        thead td{
            /*display: bl;*/
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            background: cadetblue;
        }
        tr,td{
            border: 1px solid #6f6369;
        }
    </style>
    <script src="../jquery-3.4.1.js"></script>
    <script>
        window.onload=function(){
            var data=[{
                        name:"wujins",
                        nature:'programmer',
                        addition:"he is a very hardworkingman"
                        },{
                        name:"wujins1",
                        nature:'footballplayer',
                        addition:"he is fond of football"
                        },{
                        name:"wujins2",
                        nature:'poet',
                        addition:"he is a very talent poetry"
                        }]
            $('button').click(function () {
                var str='';
                // console.log(data[0])
                for(var i=0;i<data.length;i++){
                    str=str+"<tr><td>"+data[i].name+"</td>"+"<td>"+data[i].nature+"</td>"+"<td>"+data[i].addition+"</td></tr>>"
                }
                    $('tbody').append(str);
                }
        )}
    </script>
    <body>
    <button>添加数据</button>
    <table>
        <thead>
        <tr>
            <td>名称</td>
            <td>属性</td>
            <td>作用</td>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
    </body>
    </html>